import React, { useState, useEffect } from 'react';

import styles from './index.less';

import { Descriptions } from 'antd';

import PersonalInformation from './component/PersonalInformation';
import Picture from './component/Picture';

import MenuLeft from './component/MenuLeft';
import Skill from './component/Skill';

// const img = require("@webimg/sprite/index.png");

export default function Homes(props) {
  let { routes, location } = props;
  const [state, setState] = useState(0);

  const menuItemClick = (count) => {
    // console.log(count);
    setState(count);
  };

  const menuContentRender = () => {
    if (state === 0) {
      return <PersonalInformation />;
    }
    if (state === 1) {
      return <Picture />;
    }
    if (state === 2) {
      return <Skill />;
    }
  };
  return (
    <>
      <div className={styles.wrap}>
        <div className={styles.wrap_container}>
          <div className={styles.wrap_top}></div>
          <div className={styles.middle_wrap}>
            <div className={styles.middle_wrap_left}>
              <MenuLeft menuItemClick={menuItemClick} />
            </div>
            <div className={styles.middle_wrap_right}>
              {menuContentRender()}
            </div>
          </div>
          <div className={styles.footer}>
            <p>
              <a href="http://beian.miit.gov.cn/" target="_blank">
                豫ICP备2021021687号
              </a>
            </p>
          </div>
        </div>
      </div>
    </>
  );
}
